<template>
  <navBar @onSearch="search"/>
  <p>搜索的名称:{{searchVal}}</p>
  <div>
    <h1 v-text="uname"></h1>
    <van-button size="mini" type="primary" v-on:click="handleChangeState1">state参数同步修改</van-button>
    <van-button size="mini" type="primary" v-on:click="handleChangeState2">state参数异步修改</van-button>
    <van-button size="mini" type="primary" v-on:click="handleChangeState3">state参数getters获取</van-button>
    <van-button size="mini" type="primary" v-on:click="handleChangeState4">state获取模块化参数</van-button>
    <van-button size="mini" type="primary" v-on:click="logout">注销登录</van-button>
  </div>
  <tabBar :active="3"/>
</template>

<script lang='ts'>
import {Vue,Options} from 'vue-class-component'
import {useRoute, useRouter} from 'vue-router'
import {useStore} from 'vuex'
import { getBanner } from "@/api/api";
import tabBar from '@/components/tabBar.vue';
import navBar from '@/components/navBar.vue';
@Options({
  components:{
     //组件声明
     tabBar,
     navBar
  }
})
export default class HomeView extends Vue{
     //声明变量 不能使用关键字var,let,const 并且必须有初始值
     //使用的时候使用this
     uname:string="小号"
     
     searchVal:string=""

     //获取传递的参数
     route:any = useRoute()
     
     //路由跳转
     router:any = useRouter()

     store:any = useStore()

     
     //emit
     search(value):void{
       this.searchVal = value
     }


     handleChangeState1():void {
        // this.store.commit("addNum")
        this.store.commit("addNumByNumber",100)
        console.log("同步修改"+this.store.state.num)
     }

     handleChangeState2():void {
        this.store.dispatch("addNum")
        console.log("异步修改"+this.store.state.num)
     }

     handleChangeState3():void {
        this.store.getters("getNum")
     }

     handleChangeState4():void {
        console.log("state模块化userInfo",this.store)
     }

     logout():void {
        this.store.dispatch('userInfo/logout')
        this.router.push('/login')
     }


     //8个生命周期介绍
     public beforeCreate():void {
       console.log('beforeCreate')
     }

     public created():void {
       console.log('Create')

       getBanner().then(res=>{
        console.log(res)
       })
       
       //这个如果使用"query"+this.route.query;就会把对象和字符串拼接起来
       //所以一般使用,号分割开
       console.log("query参数",this.route.query)
       console.log("params参数",this.route.params)
       console.log("store参数",this.store.state.num)
     }

     public beforeMount():void {
       console.log('beforeMount')
     }

     public mounted(): void{
       console.log('mounted')
       setTimeout(()=>{
        this.uname = '小明'
       },2000)
     }

     public beforeUpdate():void {
       console.log('beforeUpdate')
     }

     public updated():void {
       console.log('Update')
     }

     public beforeUnmount():void {
       console.log('beforeUnmount')
     }

     public Unmount():void {
       console.log('Unmount')
     }
}
</script>
<style scoped lang='scss'>
</style>
